import React, { Component } from 'react';
import { StyleSheet, View, Dimensions, Text, Image, TextInput, TouchableOpacity, PixelRatio, ScrollView, Keyboard } from "react-native";
import { style } from '../../../../theme/style';
import { ParentBox } from './ParentBox';
import ToastUtil from '../../../../utils/toast';
import ValidateDataUtil from '../../../../utils/ValidateDataUtil';

const ScreenWidth = Dimensions.get('window').width;
const scale = ScreenWidth / 375;
const correct = require('../../../../imgs/global/correct.png');

export class EditMailCpt extends ParentBox {
	constructor(props) {
		super(props);
		this.state = {
			data: props.data
		}
	}

	componentWillReceiveProps(props) {
		if (props) {
			this.setState({
				data: props.data
			})
		}
	}

	_removeFn = (index) => {
		let { data } = this.state;
		let removeitem = data.dataArr.splice(index, 1)
		this.setState({
			data
		}, () => {
			if (removeitem.length > 0) {
				this._setData();
			}
		})
	}

	_addFn = () => {
		console.log('新增')
		let { data } = this.state;
		if (data.dataArr.includes('')) {
			ToastUtil.showWarning('不能添加多条空数据');
			return;
		}
		data.dataArr.push('');
		this.setState({
			data
		})
	}

	_editFn = (index, inputValue) => {
		let { data } = this.state;
		data.dataArr[index] = inputValue;
		this.setState({
			data
		}, () => {
			this._setData();
		})
	}

	_resetFn = () => {
		let { data } = this.state;
		data.dataArr = data.oldArr;
		this.setState({
			data
		}, () => {
			this._setData();
		})
	}

	_setData = () => {
		let { callBack } = this.props;
		let { data } = this.state;
		let { id } = data || {};
		data.dataArr = data.dataArr.map(item => item.trim());
		data.dataArr = data.dataArr.filter(item => item != '');
		callBack && callBack({ [id]: data.dataArr.length > 0 ? data.dataArr.join(';') : '' });
	}

	_isChange = (index) => {
		let { data } = this.state;
		let { dataArr, oldArr } = data || {};
		return (index > oldArr.length || !oldArr.includes(dataArr[index])) ? true : false;
	}

	_checkFn = () => {
		let { callBack } = this.props;
		let { data } = this.state;
		let { preparedByAddress, preparedByAddressShow } = data || {};
		data.preparedByAddress = preparedByAddress === preparedByAddressShow ? null : preparedByAddressShow;
		this.setState({
			data
		}, () => {
			callBack && callBack({ 'preparedByAddress': data.preparedByAddress });
		})
	}

	_content = () => {
		let { data } = this.state;
		let { title, id, preparedByAddress, dataArr, createName, preparedByAddressShow } = data || {};
		return (
			<View style={styles.TextArea}>
				<Text style={styles.title}>{title}</Text>
				{
					id === 'emails' ? <TouchableOpacity onPress={this._checkFn} style={[styles.hdBox, { marginBottom: 5 * scale }]}>
						<View style={styles.lockView} >
							{preparedByAddress ? <Image style={styles.lockImage} source={correct} /> : null}
						</View>
						<Text style={styles.hdLookText}>{`同步发送制单人(${createName} ${preparedByAddressShow})`}</Text>
					</TouchableOpacity> : null
				}
				<View style={styles.mailList} keyboardShouldPersistTaps={'always'}>
					{
						dataArr && dataArr.map((item, index) => {
							return (
								<View key={index}>
									<View style={styles.item}>
										<TextInput
											ref={`input${index}`}
											clearButtonMode={'while-editing'}
											defaultValue={item || ''}
											placeholderTextColor={"#999"}
											underlineColorAndroid='transparent'
											style={[styles.input, this._isChange(index) ? { color: 'red' } : null]}
											onChangeText={(inputValue) => {
												this._editFn(index, inputValue);
											}}
											onEndEditing={() => {
												console.log('onEndEditing', item, ValidateDataUtil.isEmail(item))
											}}
										/>
										<Text style={styles.remove} onPress={() => { this._removeFn(index) }}>删除</Text>
									</View>
								</View>
							)
						})
					}
					<View style={{ flexDirection: 'row', justifyContent: 'flex-end' }} >
						<Text onPress={() => { this._addFn() }} style={styles.add} >+ 新增</Text>
					</View>
				</View>
				<View style={styles.mailBottom}>
					<Text style={styles.tishi}>* 修改后的邮箱会标红哦</Text>
					<Text style={styles.default} onPress={this._resetFn}>恢复默认带入邮箱</Text>
				</View>
			</View >
		)
	}
}

const styles = StyleSheet.create({
	title: {
		fontSize: 12 * scale,
		marginVertical: 10 * scale
	},
	hdBox: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingRight: 15 * scale,
		marginTop: 8 * scale,
	},
	hdLookText: {
		fontSize: 12 * scale,
		fontWeight: 'bold'
	},
	lockView: {
		flexDirection: 'row',
		justifyContent: 'center',
		alignItems: 'center',
		height: 14 * scale,
		width: 14 * scale,
		borderWidth: 1 * scale,
		borderColor: style.color.themeColor,
		marginRight: 10 * scale,
	},
	lockImage: {
		tintColor: style.color.themeColor,
		width: 8 * scale,
		height: 8 * scale
	},
	mailList: {
		// paddingVertical: 10 * scale,
		// borderTopWidth: 5 * scale,
		borderTopColor: "#E3E7F0",
	},
	item: {
		flexDirection: 'row',
		//justifyContent: 'center',
		alignItems: 'center',
		paddingLeft: 26 * scale,
		marginBottom: 5 * scale
	},
	input: {
		borderBottomWidth: 1 / PixelRatio.get(),
		borderBottomColor: style.borderColor,
		width: 225 * scale,
		lineHeight: 20 * scale,
		fontSize: 12 * scale,
		fontWeight: 'bold',
		color: '#000',
		paddingVertical: 0,
		textAlignVertical: 'top'
	},
	remove: {
		paddingHorizontal: 15 * scale,
		paddingVertical: 10 * scale,
		fontSize: 12 * scale,
		color: 'red',
		marginTop: 8 * scale
	},
	error: {
		fontSize: 12 * scale,
		color: 'red',
		paddingLeft: 20 * scale
	},
	add: {
		fontSize: 12 * scale,
		textAlign: 'right',
		width: 70 * scale,
		color: style.color.themeColor,
		paddingHorizontal: 15 * scale,
		paddingVertical: 10 * scale
	},
	mailBottom: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'space-between',
		borderTopWidth: 5 * scale,
		borderTopColor: "#E3E7F0",
	},
	tishi: {
		color: 'red',
		fontSize: 10 * scale,
		paddingVertical: 10 * scale,
	},
	default: {
		color: style.color.themeColor,
		fontSize: 10 * scale,
		paddingVertical: 10 * scale,
	}
})